<template>
  <el-main>
      <el-row>
        <el-col :span="14" :offset="5">
          <el-row class="items_card_body">
            <el-col :span="11" :offset="1" style="border-right: solid 1px #e6e6e6; padding:0 20px;" >
              <el-image :src="item_current.item_picture" class="image" style="width:100%" v-if="item_current.item_picture"></el-image>
            </el-col>
            <el-col :span="11" style="padding:0 20px">
              <div class="current_item_name">{{item_current.item_name}}</div>
              <div class="current_item_price">￥{{item_current.item_price}}</div>
              <div class="current_item_intro" style="height: 100px;">商品介绍:{{item_current.item_intro}}</div>
              <div class="current_item_button" v-if="this.$store.state.user.type_id!==2">
                <el-button type="plain" @click="addToMine" v-if="add" style="font-size: 18px" >
                  <img src="../assets/icon_add.svg" style="height:100%; "/>添加购物车
                </el-button>
                <el-button type="plain" v-if="added" class="button" style="font-size: 18px">
                  <img src="../assets/icon_added.svg" style="height:100%;"/>已添加
                </el-button>
                <el-button type="primary" @click="buyItem" style="font-size: 18px">直接购买</el-button>
              </div>
              <div class="current_item_button" v-if="this.$store.state.items.index_page===2">
                <el-button type="plain" @click="addToMine" v-if="add" style="font-size: 18px" >
                  <img src="../assets/icon_add.svg" style="height:100%; "/>添加购物车
                </el-button>
                <el-button type="plain" v-if="added" class="button" style="font-size: 18px">
                  <img src="../assets/icon_added.svg" style="height:100%;"/>已添加
                </el-button>
                <el-button type="primary" @click="buyItem" style="font-size: 18px">直接购买</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
  </el-main>

</template>
<style scoped>

.items_card_body{
  background-color: inherit;
  height:600px;
  justify-content: center;
  align-items: center;
}
.current_item_name{
  font-size: 35px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.current_item_price{
  font-size: 25px;
  letter-spacing: 2px;
  margin:10px 0;
}
.current_item_intro{
  margin: 10px 0;
}
.current_item_button{
  margin-bottom: 0;
}
.image {
  width: 100%;
  display: block;
}
</style>
<script>
export default {
  name: "items_card",
  data() {
    return {
      item_current: this.$store.state.items.item_current,
      add_info:{
        item_id:'',
        item_num:1
      },
      add:true,
      added:false

    };
  },
  methods:{
    addToCart(){
      this.add_info.item_id=this.item_current.item_id
      console.log('添加购物车请求')
      // console.log(this.add_info)
      this.$store.dispatch(('items/addItemToCart'), this.add_info)
      .then(()=>{
        this.$message.success('添加购物车成功！');
      })
      .catch(e=>{
        this.$message.error('添加购物车失败！')
      })
    },
    addToWish(){
      this.$store.dispatch(('items/addItemToWish'), {item_id:this.item_current.item_id})
      .then(()=>{
        this.$message.success('添加心愿单成功！');
      })
      .catch(e=>{
        this.$message.error('添加心愿单失败！')
      })
    },
    addToMine(){
      this.add=false;
      this.added=true;
      switch (this.$store.state.user.type_id){
        case 1:
        case 3:
          this.addToCart();
          break;
        case 2:
          this.addToWish();
          break;
      }
    },

    buyItem(){
      let buy_info={
        item_id:this.item_current.item_id,
        item_num:1,
        item_price:this.item_current.item_price,
        store_id:this.item_current.store_id
      }
      this.$store.dispatch(('items/buyItem'), buy_info)
      .then(()=>{
        this.$message.success('正在生成订单');
        this.$router.push('/order_purchase')
      })
      .catch(e=>{
        this.$message.error('订单生成失败！')
      })
    }
  },
  created() {

    console.log('当前商品信息',this.$store.state.items.item_current)
  }
}
</script>


